<template>
    <div>
        <a-table :columns="columns" :data-source="dataSource" :pagination="pagination" :rowKey="record => record.name">
            <template slot="pic" slot-scope="text, record">
                <div v-for="obj in record.pcImgUrl.split(',')" :key="obj">
                    <img :src="obj" alt="" style="width: 40px; height: 40px;"/>
                </div>
            </template>

        <template #tags="val, data">
          <span>{{
                  [...data.autoTagsList, ...data.tagsList]
                      .map((x) => x.name)
                      .slice(0, 2)
                      .join('、')
              }}</span>
                <a-tooltip v-if="[...data.autoTagsList, ...data.tagsList].map((x) => x.name).length > 2">
                    <template slot="title">
                        <span>{{ [...data.autoTagsList, ...data.tagsList].map((x) => x.name).join('、') }}</span>
                    </template>
                    <a class="pl-10">更多</a>
                </a-tooltip>
            </template>
            <template #set="val, data">
                <div>
                    <a @click="priceDetails(data)" class="mr-10">车型价格</a>
                    <a @click="carModalLog(data)">车型日志</a>
                </div>
            </template>
        </a-table>
        <Log :type="3" ref="log">
            <section slot="title" class="title">
                <section>车型日志</section>
                <section class="dot"/>
                <section>{{ currData.id }}</section>
            </section>
        </Log>
           <!-- 车辆价格 -->
      <a-modal
        v-model="showCarPrice"
        width="1200px"
        :dialog-style="{ top: '30px' }"
        :body-style="{ padding: '12px 24px' }"
      >
        <section slot="title" class="title">
          <span>车型价格</span>
        </section>
        <CarPrice
          v-if="showCarPrice"
          :vehicle-id="data.id"
          :PricevehicleTypeId="PricevehicleTypeId"
          :storeId="storeId2"
        />
        <template #footer>
          <a-button type="primary" @click="showCarPrice = false">好的</a-button>
        </template>
      </a-modal>
    </div>
    
</template>

<script>
import {tableMixins} from "@/utils/mixins";
import {getStoreList} from "@/api/store.js";
import CarPrice from './store-info/CarPrice.vue'
export default {
    name: 'carPrice',
    props:{
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        storeId2: {
            type: [String, Number],
            default: ''
        },
    },
    components: {  CarPrice },
    data() {
        return {
            dataSource: [],
            columns:[
                { title: '车型信息', dataIndex:'vehicleTypeDesc' },
                { title: '车型图片', align: 'center', scopedSlots: { customRender: 'pic' } },
                { title: '标签', scopedSlots: { customRender: 'tags' }, width: 320 },
                { title: '操作', scopedSlots: { customRender: 'set' } },
            ],
            currData: {},
            PricevehicleTypeId:"",
            showCarPrice:false
        }
    },
    mixins: [tableMixins],
    methods: {
        getData() {
            console.log(`getData`)
            getStoreList({
                storeId: this.storeId2,
                pageNo: this.pageNum,
                pageSize: this.rowsNum,
            }).then(res => {
                console.log(`res`, res)
                this.dataSource = res.items
                this.total = res.rowCount
            })
        },
        carModalLog(data) {
            this.currData = data
            this.$refs.log.open(data.id)
        },
        priceDetails(data) {
            console.log(this.data);
          this.PricevehicleTypeId = data.vehicleTypeId
          this.showCarPrice = true
    },
    },
}
</script>

<style scoped lang="less">
.title {
    display: flex;
    align-items: center;

    .dot {
        width: 4px;
        height: 4px;
        margin: 0 8px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.65);
    }
}
</style>
